<template>
<div class="note-example-box">
	<el-button @click='fn2'>{{userData.id}}</el-button>
	<div class="note-code-case">
		<textarea :value='codeVal' disabled style="height: 460px;"></textarea>
	</div>
</div>
</template>
<script setup>
import { reactive, watch } from 'vue'
const userData = reactive({
	id: 11,
	name: 'xx1',
});
const fn2 = () => {
    userData.id++;
};
watch(() => userData.id, (newName, oldName) => {
	console.log('watch userData.id', newName, oldName);
});
watch(userData, (newName, oldName) => {
	console.log('watch userData', newName, oldName);
});

//对应代码
const codeVal = `<template>
<el-button @click='fn2'>{{userData.id}}</el-button>
</template>

<script setup>
import { reactive, watch } from 'vue'
const userData = reactive({
	id: 11,
	name: 'xx1',
});
const fn2 = () => {
    userData.id++;
};
watch(() => userData.id, (newName, oldName) => {
	console.log('watch userData.id', newName, oldName);
});
watch(userData, (newName, oldName) => {
	console.log('watch userData', newName, oldName);
});
<script>`;
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>